<template>
  <div class="Detail">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img :src="obj.coverImg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="obj.coverImg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="obj.coverImg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="xq">
      <h2>{{ obj.name }}</h2>
      <h3>精美商品，你值得拥有！！！</h3>
      <p>￥{{ (obj.price / 100).toFixed(2) }}</p>
      <h4>
        故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。
      </h4>
      <a href="#"><van-icon name="diamond-o" size="20" /> 退换货政策</a>
      <div class="zx">
        <p>
          <van-icon name="edit" size="20" />&nbsp;&nbsp;设计咨询&nbsp;&nbsp;
          <van-icon name="arrow" size="20" />
        </p>
        <p>进行对一设计咨询。你也可以打开设计工具.</p>
      </div>
    </div>
    <!-- 详情图 -->
    <div v-html="obj.content" class="tup"></div>
    <van-goods-action>
      <van-goods-action-icon
        icon="like-o"
        color="#ff5000"
        @click="shoucang"
        v-if="flag"
      />
      <van-goods-action-icon
        icon="like"
        color="#ff5000"
        v-if="!flag"
        @click="shoucang"
      />
      <van-goods-action-button
        type="warning"
        color="rgba(0, 88, 163,.6)"
        icon="shopping-cart-o"
        text="加入购物袋"
        @click="ongouwuce"
      />
      <van-goods-action-button
        type="danger"
        color="#0058a3"
        text="立即购买"
        @click="ongoumai"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { reqDetailAPI, addTocartAPI } from "../../api/xiangqingye";
import { getAddresslistApi } from "../../api/address";
import { addOrderAPI } from "../../api/cart";
import { Toast } from "vant";
export default {
  data() {
    return {
      obj: "",
      flag: true,
      list: localStorage.getItem("ids")
        ? JSON.parse(localStorage.getItem("ids"))
        : [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取商品信息
    async getDetail(id) {
      const result = await reqDetailAPI(id);
      console.log(result);
      this.obj = result;
    },
    //添加购物车
    async ongouwuce() {
      const id = this.$route.params.id;
      // console.log(id);
      const result = await addTocartAPI(id);
      console.log(result);
      if (result.code == "success") {
        Toast("添加购物车成功");
      }
    },
    // 购买商品
    async ongoumai() {
      const res1 = await getAddresslistApi();
      if (res1.totalCount === 0) {
        Toast("暂无地址，请添加地址");
        this.$router.push("/addaddr2");
      } else {
        console.log(res1.addresses);
        const add = res1.addresses.filter((item) => item.isDefault == true);
        const { receiver, regions, address } = add[0];
        console.log(receiver, regions, address);
        const res2 = await addOrderAPI({
          receiver,
          regions,
          address,
          orderDetails: [
            {
              quantity: 1,
              product: this.obj._id,
              price: this.obj.price,
            },
          ],
        });
        console.log(res2);
        console.log(res2.code);
        if (res2.code == "success") {
          console.log(res2.info.order._id);
          // Toast('提交成功');
          // let id = "123";
          this.$router.push({
            name: "OrderList",
            // path: "/orderlist/" + id,
            params: { ids: [res2.info.order._id] },
          });
          // this.$router.push("/orderlist");
        }
      }
    },
    shoucang() {
      this.flag = !this.flag;
      if (this.flag === true) {
        Toast("取消收藏");

        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i] === this.$route.params.id) {
            this.list.splice(i, 1);
            localStorage.setItem("ids", JSON.stringify(this.list));
            this.flag = true;
            return;
          }
        }
      } else {
        Toast("加入收藏");

        console.log(this.list);
        this.list.push(this.$route.params.id);
        localStorage.setItem("ids", JSON.stringify(this.list));
      }
    },
    isshoucang() {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i] === this.$route.params.id) {
          this.flag = false;
          return;
        }
      }
    },
  },
  created() {
    //接收传过来的id
    const id = this.$route.params.id;
    this.getDetail(id);

    this.isshoucang();
  },
  mounted() {},
  components: {},
};
</script>
<style>
.Detail {
  padding: 50px 0 50px 0;
}
.my-swipe img {
  width: 100%;
  height: 350px;
}
.xq {
  padding: 20px;
}
.xq h2 {
  margin-top: 20px;
  font-size: 22px;
  font-weight: bolder;
}
.xq h3 {
  font-size: 10px;
  padding: 8px 0 8px 13px;
}
.xq h4 {
  padding: 15px 0;
  color: rgb(75, 75, 75);
  font-size: 15px;
}
.my-swipe img {
  width: 100%;
}
.xq p {
  font-weight: bolder;
  margin-bottom: 10px;
}
.tup img {
  width: 100%;
}
.zx {
  margin: 20px 0 50px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 13px;
  width: 100%;
  height: 80px;
  box-shadow: 2px 2px 10px #ccc;
}
.zx p {
  font-size: 12px;
}
</style>
